<template>
  <n-layout-header class="py-2 px-2 flex">
    <n-upload
      accept="application/zip"
      :show-file-list="false"
      :multiple="false"
      class="w-200px"
      @change="fileChange"
    >
      <n-button type="primary">选择zip文件</n-button>
    </n-upload>
  </n-layout-header>
</template>

<script setup lang="ts">
import { useThemeStore } from '@/store'
import { addColorAlpha } from '@/utils'
import { UploadFileInfo } from 'naive-ui'
import { computed } from 'vue'

const theme = useThemeStore()
const emit = defineEmits<{
  (e: 'on-file-change', fileInfo: UploadFileInfo): void
}>()

const headBgColor = computed(() => addColorAlpha(theme.themeColor, 0.02))
function fileChange(options: {
  file: UploadFileInfo
  fileList: Array<UploadFileInfo>
  event?: Event
}) {
  emit('on-file-change', options.file)
}
</script>

<style scoped>
.header-bgcolor {
  margin-bottom: 3px;
  background-color: v-bind(headBgColor);
  box-shadow: 0px 1px 3px rgb(128, 128, 128, 0.2);
}
</style>
